<!-- 日常清运首页 -->
<template>
    <div class="orderManagement">
        <div class="dropDown-wrap">
            <van-dropdown-menu>
                <van-dropdown-item teleport="body" title="日期" v-model="dropDown.time" :options="rubbishColumns" />
                <van-dropdown-item teleport="body" title="垃圾类型" v-model="dropDown.type" :options="rubbishColumns" />
                <van-dropdown-item teleport="body" title="订单状态" v-model="dropDown.status" :options="rubbishColumns" />
            </van-dropdown-menu>
        </div>
        <!-- 列表 -->
        <div class="order-list">
            <div class="order-item" v-for="(item, index) in orderList" :key="item.id">
                <div class="order-title"
                    :style="{ background: item.status == '未接单' ? 'rgba(197, 207, 224, 00.15)' : 'rgba(67, 207, 124, 0.15)' }">
                    <div class="left-box">
                        {{ index + 1 }}.<span>{{ item.code }}</span>
                    </div>
                    <div class="right-box">
                        订单状态：<span
                            :style="{ color: item.status == '未接单' ? 'rgba(152, 163, 181, 1)' : 'rgba(67, 207, 124, 1)' }">{{
                                item.status }}</span>
                    </div>
                </div>
                <!-- 订单内容 -->
                <div class="order-content">
                    <div class="order-content-wrap">
                        <!-- 详情 -->
                        <div class="isMore" @click="showMore(index)">
                            详情 <img :src="item.isMore ? uparrow : bottomarrow" alt="">
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">商铺名称：</div>
                            <div class="value">{{ item.shopName }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">商铺地址：</div>
                            <div class="value">{{ item.shopAddress }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">联系人：</div>
                            <div class="value">{{ item.contacts }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">收运方式：</div>
                            <div class="value" style="display: flex;">
                                <div class="method-box" :class="[item.method == m ? 'method-active' : '']"
                                    v-for="(m, index) in ['上门收运', '定点收运']" :key="index + item">
                                    {{ m }}
                                </div>

                            </div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">垃圾类别：</div>
                            <div class="value">{{ item.rubbishCategory }}</div>
                        </div>
                        <div class="base-row">
                            <div class="label">预约清运时间：</div>
                            <div class="value">{{ item.preTime }}</div>
                        </div>
                        <div class="base-row">
                            <div class="label">申请时间：</div>
                            <div class="value">{{ item.applyTime }}</div>
                        </div>
                        <div class="base-row">
                            <div class="label">垃圾类型：</div>
                            <div class="value">{{ item.rubbishType }}</div>
                        </div>
                        <div class="base-row">
                            <div class="label">垃圾数量：</div>
                            <div class="value">{{ item.rubbishCount }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">申请单位：</div>
                            <div class="value">{{ item.applyCompany }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">申请联系人：</div>
                            <div class="value">{{ item.applyContacts }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">车牌号：</div>
                            <div class="value">{{ item.carNumber }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">作业人员：</div>
                            <div class="value">{{ item.worker }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">实际清运时间：</div>
                            <div class="value">{{ item.acturalTime }}</div>
                        </div>
                        <div class="base-row" v-if="item.isMore">
                            <div class="label">实际收运数量：</div>
                            <div class="value">{{ item.acturalCount }}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="btn-list">
                        <div class="btn-item" @click="handleBtn(btn)" v-for="(btn, index) in item.btnList" :key="btn">
                            {{ btn }}
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- 底部空白 -->

</template>

<script setup>
import cleanTime from "@/assets/images/cleanTime.png"
import cleanCount from "@/assets/images/cleanCount.png"
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import bottomarrow from "@/assets/images/bottomarrow.png"
import uparrow from "@/assets/images/uparrow.png"
const router = useRouter()

const dropDown = reactive({
    time: "",
    type: "",
    road: ""
})
const rubbishColumns = [
    { text: '湿垃圾', value: '湿垃圾' },
    { text: '干垃圾', value: '干垃圾' },
    { text: '餐厨垃圾', value: '餐厨垃圾' },
];

const orderList = ref([
    {
        id: 1,
        code: "G202408111201",
        status: "未接单",
        shopName: '万顺私宴',
        shopAddress: '上海市闵行区虹桥镇万源路2758号',
        contacts: "罗顺玲",
        method: "上门收运",
        rubbishCategory: "干垃圾，湿垃圾，餐厨垃圾",
        preTime: "2024-08-12  06:00:00",
        applyTime: "2024-08-12  06:00:00",
        rubbishType: "湿垃圾",
        rubbishCount: "5桶",
        applyCompany: "xx",
        applyContacts: 'xx',
        carNumber: "xx",
        worker: 'xx',
        acturalTime: "xx",
        acturalCount: 'xx',
        isMore: false,
        btnList: ['定位', '派单', '取消']
    },
    {
        id: 2,
        code: "G202408111201",
        status: "已清运",
        contacts: "罗顺玲",
        method: "上门收运",
        shopName: '万顺私宴',
        shopAddress: '上海市闵行区虹桥镇万源路2758号',
        rubbishCategory: "干垃圾，湿垃圾，餐厨垃圾",
        preTime: "2024-08-12  06:00:00",
        applyTime: "2024-08-12  06:00:00",
        rubbishType: "湿垃圾",
        rubbishCount: "5桶",
        applyCompany: "xx",
        applyContacts: 'xx',
        carNumber: "xx",
        worker: 'xx',
        acturalTime: "xx",
        acturalCount: 'xx',
        isMore: false,
        btnList: ['定位']
    },
    {
        id: 3,
        code: "G202408111201",
        status: "未接单",
        shopName: '万顺私宴',
        shopAddress: '上海市闵行区虹桥镇万源路2758号',
        contacts: "罗顺玲",
        method: "上门收运",
        rubbishCategory: "干垃圾，湿垃圾，餐厨垃圾",
        preTime: "2024-08-12  06:00:00",
        applyTime: "2024-08-12  06:00:00",
        rubbishType: "湿垃圾",
        rubbishCount: "5桶",
        applyCompany: "xx",
        applyContacts: 'xx',
        carNumber: "xx",
        worker: 'xx',
        acturalTime: "xx",
        acturalCount: 'xx',
        isMore: false,
        btnList: ['定位', '派单', '取消']
    },
])
function showMore(index) {
    orderList.value[index].isMore = !orderList.value[index].isMore
    console.log("🚀 ~ showMore ~ orderList.value:", orderList.value)
}

function handleBtn(type){
    if(type == '派单'){
         router.push({
            path:'/configOrder'
         })
    }
}

</script>

<style lang="scss" scoped>
::v-deep(.van-dropdown-menu__bar) {
    height: unset;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;

}

::v-deep(.van-dropdown-menu__title) {
    font-size: 28px;
    color: rgba(128, 128, 128, 1);
}

.orderManagement {
    height: calc(100vh - 92px - 88px - 16px - 44px - 60px);
    margin-top: 16px;
    // height: calc(100% - 46px - 44px - 8px);
    padding: 24px 24px 0 24px;
    box-sizing: border-box;
    border-radius: 30px 30px 0px 0px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0) 0%, rgba(241, 248, 255, 0) 100%);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

    .dropDown-wrap {
        width: 80%;
        margin-bottom: 10px;
    }

    .order-list {
       
        box-sizing: border-box;
        overflow: scroll;
        height: calc(100vh - 92px - 88px - 16px - 44px - 60px);
        .order-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28px;
            color: rgba(51, 51, 51, 1);
            padding: 0 24px 0 30px;
            box-sizing: border-box;
            width: 702px;
            height: 80px;
            background: rgba(197, 207, 224, 00.15);

            .right-box {
                span {
                    font-size: 26px;
                }
            }
        }

        .order-content {
            position: relative;

            .order-content-wrap {
                padding: 26px 0 15px 60px;
                box-sizing: border-box;

                .base-row {
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;

                    .label {
                        text-align: right;
                        width: 182px;
                        font-size: 26px;
                        color: rgba(128, 128, 128, 1);
                    }

                    .value {
                        .method-box {
                            margin-right: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 126px;
                            height: 48px;
                            font-size: 24px;
                            color: rgba(255, 255, 255, 1);
                            background: rgba(197, 207, 224, 1);
                        }

                        .method-active {
                            background: rgba(8, 173, 255, 1);
                        }
                    }
                }

                .base-row:last-child {
                    margin: 0;
                }

                .isMore {
                    position: absolute;
                    top: 26px;
                    right: 20px;
                    z-index: 10;
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    color: rgba(166, 166, 166, 1);

                    img {
                        margin: 1px 0 0 3px;
                        width: 18px;
                        height: 10px;
                    }
                }


            }

            .line {
                margin: 0 auto;
                width: 654px;
                border: 2px solid rgba(239, 239, 239, 0.3);
            }

            .btn-list {
                margin: 14px 0;
                display: flex;
                align-items: center;

                .btn-item {
                    flex:1;
                    text-align: center;
                    font-size: 26px;
                    color: rgba(0, 160, 252, 1);
                }
            }
        }
    }

}
</style>